<template>
  <div class="bid-list-container">
    <div class="van-hairline--bottom">
      <van-field
        label="项目名称:"
        label-align="center"
        v-model="projectName"
        placeholder="请输入项目名称"
      ></van-field>
      <van-field
        label="地产名称:"
        label-align="center"
        v-model="cusFullName"
        placeholder="请输入地产名称"
      ></van-field>
      <van-field
        label="业务员:"
        label-align="center"
        v-model="nickName"
        placeholder="请输入业务员"
      >
        <!-- <template #button>
          <van-button type="info" size="mini" @click="queryBtnClick"
            >查询</van-button
          >
          <van-button type="primary" size="mini" @click="addBtnClick"
            >添加</van-button
          >
        </template> -->
      </van-field>
      <van-field
        label="详细地址:"
        label-align="center"
        v-model="projectSite"
        placeholder="请输入详细地址"
      >
        <template #button>
          <van-button type="info" size="mini" @click="queryBtnClick"
            >查询</van-button
          >
          <van-button type="primary" size="mini" @click="addBtnClick"
            >添加</van-button
          >
        </template>
      </van-field>
    </div>
    <div class="list-container">
      <div
        v-for="item in list"
        :key="item.id"
        class="list-item-container van-hairline--bottom"
        @click="listItemClick(item)"
      >
        <div class="list-item-left-container">
          <div class="list-item-left" style="font-weight: bold">
            {{ item.projectName }}
          </div>
          <div class="list-item-left">{{ item.cusFullName }}</div>
          <div class="list-item-left">业务员：{{ item.nickName }}</div>
        </div>
        <div class="list-item-center-container">
          <div class="list-item-center">
            {{
              item.winBidCase == 1 ? "中标" : item.winBidCase == 2 ? "丢标" : ""
            }}
          </div>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="pageContainer">
      <van-pagination
        v-model="pageIndex"
        :total-items="total"
        :items-per-page="10"
        force-ellipses
        @change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { CellGroup, Field, Col, Row, Button, Pagination, Icon,Toast } from "vant";
import { mapActions, mapMutations } from "vuex";
export default {
  components: {
    [Field.name]: Field,
    [Col.name]: Col,
    [Row.name]: Row,
    [Button.name]: Button,
    [Pagination.name]: Pagination,
    [Icon.name]: Icon,
  },
  data() {
    return {
      projectName: "",
      nickName: "",
      pageIndex: 1,
      total: 0,
      list: [],
      roleType: "",
      userIdListStr: "",
      cusFullName: "",
      projectSite:"",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapMutations({
      setDocsDetail: "bid/setDocsDetail",
      resetDocsDetail: "bid/resetDocsDetail",
    }),
    ...mapActions({
      getBidList: "bid/getBidList",
      getUserIdList: "user/getUserIdList",
    }),
    initData() {
      let ticket = sessionStorage.getItem("ticket");
      console.log(ticket);
      this.getUserIdList(ticket)
        .then((res) => {
          console.log(res);
          if (res.success) {
            this.roleType = res.data.roleType;
            this.userIdListStr = res.data.userIdList || "";
            this.getList();
          } else {
            Toast.fail("获取用户信息失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getList() {
      this.getBidList({
        pageSize: 10,
        pageIndex: this.pageIndex,
        sortOrder: "asc",
        projectName: this.projectName,
        nickName: this.nickName,
        cusFullName: this.cusFullName,
        userIdListStr: this.userIdListStr,
        roleType: this.roleType,
        projectSite:this.projectSite,
      })
        .then((res) => {
          console.log(res.data);
          this.list = res.res;
          this.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    queryBtnClick() {
      this.pageIndex = 1;
      this.$nextTick(() => {
        this.getList();
      });
    },
    addBtnClick() {
      this.$router.push({
        name: "bidDetail",
        query: {
          type: "add",
        },
      });
    },
    pageChange() {
      this.getList();
    },
    listItemClick(item) {
      console.log(item);
      this.setDocsDetail(item);
      this.$router.push({
        name: "bidDetail",
        query: {
          type: "detail",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bid-list-container {
  background-image: linear-gradient(white, rgb(216, 231, 240));
  .list-container {
    .list-item-container {
      display: flex;
      align-items: center;
      padding-bottom: 8px;
      margin: 4px 8px 14px 14px;
      font-size: 14px;
      .list-item-left-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        .list-item-left {
          padding: 0 0 4px 0;
        }
      }
      .list-item-center-container {
        display: flex;
        flex-direction: column;
        width: 2rem;
        .list-item-center {
          padding: 0.1rem 0;
          text-align: center;
        }
      }
    }
    .van-hairline--bottom::after {
      border-color: #8a8a8a;
    }
  }
  .pageContainer {
    margin: 8px;
  }
}
</style>